<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>拖动滑块验证</title>
    <link rel="stylesheet" type="text/css" href="">
    <style>
    *{ margin:0; padding:0; }
  .ani{transition:all .3s;}
  #slider{position:relative;background-color:#f1efe4;width:300px;height:34px;line-height:34px;text-align:center;}
  #slider .handler{position:absolute;top:0px;left:0px;width:40px;height:32px;border:1px solid #ccc;cursor:move;}
  .handler_bg{background:#fff url("img/huakuai1.png") no-repeat center;}
  .handler_ok_bg{background:#fff url("img/huakuai2.png") no-repeat center;}
  #slider .drag_bg{background-color:#7ac23c;height:34px;width:0px;}
  #slider .drag_text{color:#666;position:absolute;top:0px;width:300px;-moz-user-select:none;-webkit-user-select:none;user-select:none;-o-user-select:none;-ms-user-select:none;}
  .unselect{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;}
  .slide_ok .drag_text{color:#fff!important;}
    </style>
  </head>
  <body>
    
      <div id="slider">
        <div class="drag_bg"></div>
        <div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>
        <div class="handler handler_bg"></div>
      </div>
    <script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
    <script>
      (function(window, document) {
        var dog = { //声明一个命名空间，或者称为对象
          $: function(id) {
            return document.querySelector(id);
          },
          on: function(el, type, handler) {
            el.addEventListener(type, handler, false);
          },
          off: function(el, type, handler) {
            el.removeEventListener(type, handler, false);
          }
        };
        //封装一个滑块类
        function Slider() {
          var args = arguments[0];
          for (var i in args) {
            this[i] = args[i]; //一种快捷的初始化配置
          }
          //直接进行函数初始化，表示生成实例对象就会执行初始化
          this.init();
        }
        Slider.prototype = {
          constructor: Slider,
          init: function() {
            this.getDom();
            this.dragBar(this.handler);
          },
          getDom: function() {
            this.slider = dog.$('#' + this.id);
            this.handler = dog.$('.handler');
            this.bg = dog.$('.drag_bg');
          },
          dragBar: function(handler) {
            var that = this,
              startX = 0,
              lastX = 0,
              doc = document,
              width = this.slider.offsetWidth,
              max = width - handler.offsetWidth;

            function down(e) {
              $(that.bg).removeClass('ani');
              $(handler).removeClass('ani');
              var e = e || window.event;
              $(that.slider).addClass('unselect');
              startX = e.clientX - handler.offsetLeft;
              //console.log('startX: ' + startX + ' px');
              $(doc).on('mouseup', function() {
              $(doc).off('mousemove', move);
              $(doc).off('mouseup', up);
            });
              $(doc).on('mousemove', move);
              $(doc).on('mouseup', up);
              return false;
            };

            function move(e) {
              var e = e || window.event;
              lastX = e.clientX - startX;
              lastX = Math.max(0, Math.min(max, lastX)); //这一步表示距离大于0小于max，巧妙写法
              //console.log('lastX: ' + lastX + ' px');
              if (lastX >= max) {
                $(handler).addClass('handler_ok_bg');
                $(that.slider).addClass('slide_ok');
                //dog.off(handler,'mousedown',down);
                $(handler).off('mousedown', down);
                up();
                //alert(lastX)
              }
              $(that.bg).css("width",lastX);
              $(handler).css("left",lastX);
            };

            function up(e) {
              var e = e || window.event;
              $(that.slider).removeClass('unselect');
              if (lastX < width) {
                $(that.bg).addClass('ani');
                $(handler).addClass('ani');
                that.bg.style.width = 0;
                handler.style.left = 0;
                setTimeout(function() {
                  $(that.bg).remove('ani');
                  $(handler).remove('ani');
                }, 300);
              }
              $(doc).off('mousemove', move);
              $(doc).off('mouseup', up);
            };
            $(handler).on('mousedown', down);
            
          }
        };
        window.S = window.Slider = Slider;


      })(window, document);

      var defaults = {
        id: 'slider'
      };
      new S(defaults);
    </script>
  </body>
</html>